import React, { useEffect, useRef, useImperativeHandle } from "react";

interface GuangProps {
  name: string;
}

interface GuangRef {
  aaa: () => void;
}
const WrapedGuang = React.forwardRef<GuangRef, GuangProps>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);
  // useImperativeHandle<GuangRef, { ccc: string } & GuangRef>(
  useImperativeHandle(
    ref,
    () => {
      return {
        aaa() {
          inputRef.current?.focus();
        },
        ccc: "ccc",
      };
    },
    [inputRef]
  );

  return (
    <>
      <input ref={inputRef} />
      <div>{props.name}</div>
    </>
  );
});

function App() {
  const ref = useRef<GuangRef>(null);

  useEffect(() => {
    console.log("ref", ref.current);
    ref.current?.aaa();
  }, []);

  return (
    <div className="App">
      <WrapedGuang name="guang" ref={ref} />
    </div>
  );
}

export default App;
